'use client';

import React, { useState } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Badge from '@/components/ui/Badge';
import { 
  Cloud, 
  Smartphone, 
  Users, 
  AlertTriangle,
  Shield,
  Camera,
  Activity,
  TrendingUp,
  Eye,
  Settings,
  BarChart3
} from 'lucide-react';

export default function CloudEdgePage() {
  const [selectedScenario, setSelectedScenario] = useState('personnel_recognition');

  const scenarios = [
    {
      id: 'personnel_recognition',
      name: '人员作业识别',
      type: 'image',
      baseline_accuracy: 0.80,
      current_accuracy: 0.88,
      target_improvement: 0.10,
      icon: Users,
      color: 'blue'
    },
    {
      id: 'equipment_defect_image',
      name: '设备缺陷识别(图像)',
      type: 'image',
      baseline_accuracy: 0.75,
      current_accuracy: 0.85,
      target_improvement: 0.10,
      icon: Camera,
      color: 'green'
    },
    {
      id: 'environment_hazard',
      name: '环境隐患识别',
      type: 'image',
      baseline_accuracy: 0.82,
      current_accuracy: 0.89,
      target_improvement: 0.10,
      icon: Eye,
      color: 'yellow'
    },
    {
      id: 'equipment_defect_sequence',
      name: '设备缺陷识别(序列)',
      type: 'sequence',
      baseline_accuracy: 0.78,
      current_accuracy: 0.86,
      target_improvement: 0.10,
      icon: Activity,
      color: 'purple'
    }
  ];

  const forgettingData = [
    {
      task_name: '人员作业识别',
      original_accuracy: 0.85,
      current_accuracy: 0.81,
      forgetting_rate: 0.047
    },
    {
      task_name: '设备缺陷识别',
      original_accuracy: 0.82,
      current_accuracy: 0.79,
      forgetting_rate: 0.037
    },
    {
      task_name: '环境隐患识别',
      original_accuracy: 0.89,
      current_accuracy: 0.86,
      forgetting_rate: 0.034
    }
  ];

  const selectedScenarioData = scenarios.find(s => s.id === selectedScenario);

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between rounded-lg px-4 py-3">
        <div>
          <h1 className="text-xl font-bold text-gray-900">云边协同进化</h1>
          <p className="text-sm text-gray-600 mt-0.5">电力特定任务场景能力提升与灾难遗忘监控</p>
        </div>
        <div className="flex gap-3">
          <Button variant="primary" size="sm">
            <TrendingUp className="h-4 w-4 mr-2" />
            启动能力提升
          </Button>
          <Button variant="secondary" size="sm">
            <Settings className="h-4 w-4 mr-2" />
            配置参数
          </Button>
        </div>
      </div>

      {/* 云边架构概览 */}
      <Card className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">云边协同架构</h3>
        <div className="flex items-center justify-center space-x-8">
          {/* 云端 */}
          <div className="text-center">
            <div className="flex items-center justify-center w-20 h-20 bg-blue-100 rounded-full mb-4">
              <Cloud className="h-10 w-10 text-blue-600" />
            </div>
            <h4 className="font-medium text-gray-900">云端大模型</h4>
            <p className="text-sm text-gray-600">中央协调与知识蒸馏</p>
            <Badge variant="success" className="mt-2">在线</Badge>
          </div>
          
          <div className="flex-1 border-t-2 border-dashed border-gray-300 relative">
            <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-white px-2">
              <span className="text-sm text-gray-500">协同进化</span>
            </div>
          </div>
          
          {/* 边缘节点 */}
          <div className="flex space-x-6">
            <div className="text-center">
              <div className="flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-3">
                <Smartphone className="h-8 w-8 text-green-600" />
              </div>
              <h4 className="font-medium text-gray-900">边缘节点1</h4>
              <p className="text-sm text-gray-600">变电站A</p>
              <Badge variant="success" className="mt-1">运行中</Badge>
            </div>
            
            <div className="text-center">
              <div className="flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-3">
                <Smartphone className="h-8 w-8 text-green-600" />
              </div>
              <h4 className="font-medium text-gray-900">边缘节点2</h4>
              <p className="text-sm text-gray-600">变电站B</p>
              <Badge variant="success" className="mt-1">运行中</Badge>
            </div>
          </div>
        </div>
      </Card>

      {/* 电力特定任务场景 */}
      <Card className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">电力特定任务场景管理</h3>
        
        {/* 场景选择 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          {scenarios.map((scenario) => {
            const Icon = scenario.icon;
            const progress = ((scenario.current_accuracy - scenario.baseline_accuracy) / scenario.target_improvement) * 100;
            
            return (
              <div
                key={scenario.id}
                onClick={() => setSelectedScenario(scenario.id)}
                className={`p-4 border rounded-lg cursor-pointer transition-all ${
                  selectedScenario === scenario.id
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-gray-300'
                }`}
              >
                <div className="flex items-center justify-between mb-3">
                  <Icon className={`h-6 w-6 text-${scenario.color}-600`} />
                  <Badge variant={scenario.type === 'image' ? 'info' : 'warning'}>
                    {scenario.type === 'image' ? '图像类' : '序列类'}
                  </Badge>
                </div>
                <h4 className="font-medium text-gray-900 mb-2">{scenario.name}</h4>
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">当前精度:</span>
                    <span className="font-medium">{(scenario.current_accuracy * 100).toFixed(1)}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div 
                      className={`bg-${scenario.color}-600 h-2 rounded-full transition-all duration-300`}
                      style={{ width: `${Math.min(progress, 100)}%` }}
                    />
                  </div>
                  <div className="text-xs text-gray-500">
                    进度: {progress.toFixed(1)}%
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* 选中场景详情 */}
        {selectedScenarioData && (
          <div className="bg-gray-50 p-6 rounded-lg">
            <h4 className="text-lg font-semibold text-gray-900 mb-4">
              {selectedScenarioData.name} - 性能详情
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-white p-4 rounded-lg">
                <h5 className="font-medium text-gray-700 mb-2">基准精度</h5>
                <p className="text-2xl font-bold text-gray-900">
                  {(selectedScenarioData.baseline_accuracy * 100).toFixed(1)}%
                </p>
              </div>
              <div className="bg-white p-4 rounded-lg">
                <h5 className="font-medium text-gray-700 mb-2">当前精度</h5>
                <p className="text-2xl font-bold text-green-600">
                  {(selectedScenarioData.current_accuracy * 100).toFixed(1)}%
                </p>
              </div>
              <div className="bg-white p-4 rounded-lg">
                <h5 className="font-medium text-gray-700 mb-2">提升幅度</h5>
                <p className="text-2xl font-bold text-blue-600">
                  +{((selectedScenarioData.current_accuracy - selectedScenarioData.baseline_accuracy) * 100).toFixed(1)}%
                </p>
              </div>
            </div>
            
            <div className="mt-6 flex gap-3">
              <Button className="bg-blue-600 hover:bg-blue-700 text-white">
                <TrendingUp className="h-4 w-4 mr-2" />
                启动能力提升
              </Button>
              <Button variant="secondary">
                <BarChart3 className="h-4 w-4 mr-2" />
                查看详细报告
              </Button>
            </div>
          </div>
        )}
      </Card>

      {/* 灾难遗忘程度监控 */}
      <Card className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">灾难遗忘程度监控</h3>
        
        {/* 总体遗忘率 */}
        <div className="bg-green-50 p-4 rounded-lg mb-6">
          <div className="flex items-center justify-between">
            <div>
              <h4 className="text-lg font-semibold text-green-900">总体遗忘率</h4>
              <p className="text-sm text-green-700">所有任务平均遗忘程度</p>
            </div>
            <div className="text-right">
              <p className="text-3xl font-bold text-green-900">5.0%</p>
              <div className="flex items-center text-sm text-green-700">
                <Shield className="h-4 w-4 mr-1" />
                <span>安全范围内 (&lt; 10%)</span>
              </div>
            </div>
          </div>
        </div>

        {/* 各任务遗忘情况 */}
        <div className="space-y-4">
          <h4 className="font-medium text-gray-900">各任务遗忘情况详情</h4>
          {forgettingData.map((task, index) => (
            <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
              <div className="flex-1">
                <h5 className="font-medium text-gray-900">{task.task_name}</h5>
                <div className="flex items-center space-x-4 mt-1 text-sm text-gray-600">
                  <span>原始精度: {(task.original_accuracy * 100).toFixed(1)}%</span>
                  <span>当前精度: {(task.current_accuracy * 100).toFixed(1)}%</span>
                </div>
              </div>
              
              <div className="text-right">
                <div className="flex items-center space-x-2">
                  <span className={`text-lg font-semibold ${
                    task.forgetting_rate < 0.05 ? 'text-green-600' : 
                    task.forgetting_rate < 0.08 ? 'text-yellow-600' : 'text-red-600'
                  }`}>
                    {(task.forgetting_rate * 100).toFixed(1)}%
                  </span>
                  {task.forgetting_rate < 0.05 ? (
                    <Shield className="h-5 w-5 text-green-600" />
                  ) : task.forgetting_rate < 0.08 ? (
                    <AlertTriangle className="h-5 w-5 text-yellow-600" />
                  ) : (
                    <AlertTriangle className="h-5 w-5 text-red-600" />
                  )}
                </div>
                <Badge 
                  variant={
                    task.forgetting_rate < 0.05 ? 'success' : 
                    task.forgetting_rate < 0.08 ? 'warning' : 'error'
                  }
                  size="sm"
                >
                  {task.forgetting_rate < 0.05 ? '正常' : 
                   task.forgetting_rate < 0.08 ? '注意' : '警告'}
                </Badge>
              </div>
            </div>
          ))}
        </div>

        {/* 遗忘评估控制 */}
        <div className="mt-6 p-4 bg-blue-50 rounded-lg">
          <h4 className="font-medium text-blue-900 mb-3">遗忘评估配置</h4>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-blue-900 mb-1">
                评估周期
              </label>
              <select className="w-full p-2 border border-blue-200 rounded-md">
                <option value="daily">每日</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-blue-900 mb-1">
                遗忘率阈值
              </label>
              <input 
                type="number" 
                defaultValue="0.1"
                step="0.01"
                max="1"
                className="w-full p-2 border border-blue-200 rounded-md"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-blue-900 mb-1">
                自动修复
              </label>
              <select className="w-full p-2 border border-blue-200 rounded-md">
                <option value="enabled">启用</option>
                <option value="disabled">禁用</option>
              </select>
            </div>
          </div>
          
          <div className="mt-4 flex gap-3">
            <Button variant="primary" size="sm">
              开始评估
            </Button>
            <Button variant="secondary" size="sm">
              导出报告
            </Button>
          </div>
        </div>
      </Card>

      {/* 性能趋势图表 */}
      <Card className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">性能趋势监控</h3>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-gray-900 mb-2">精度提升趋势</h4>
            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
              <div className="text-center text-gray-500">
                <TrendingUp className="h-12 w-12 mx-auto mb-2" />
                <p>精度提升趋势图表</p>
                <p className="text-sm">(集成图表组件)</p>
              </div>
            </div>
          </div>
          <div>
            <h4 className="font-medium text-gray-900 mb-2">遗忘率变化</h4>
            <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
              <div className="text-center text-gray-500">
                <BarChart3 className="h-12 w-12 mx-auto mb-2" />
                <p>遗忘率变化图表</p>
                <p className="text-sm">(集成图表组件)</p>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
} 